<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
    <title>vue</title>
</head>
<style>
    table{
        border-collapse: collapse;
    }

</style>
<body>
    <div id="app">
        <lists></lists>
    </div>
    <!--构建模板-->
    <script type="text/x-template" id="lists">
        <div>
            <table border="1px" width="60%">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>总计</th>
                </tr>
                <tr v-for="v in goods">
                    <td>{{v.id}}</td>
                    <td>{{v.title}}</td>
                    <td>{{v.price}}</td>
                    <td>{{v.num}}</td>
                    <td>{{v.totalPrice}}</td>
                </tr>
            </table>
            <h1>总价：{{totalPrice}}</h1>
        </div>

    </script>

</body>
<script>
    let store=new Vuex.Store({
        state:{
            totalPrice:100,
            goods:[
                {id:1,title:'iphone7',price:399,num:3},
                {id:2,title:'iphone8',price:1888,num:2}
            ]
        },
         getters:{
            totalPrice:state=>{
                let totalPrice=0;
                state.goods.forEach((v)=>{
                    totalPrice+=v.num*v.price;
                })
                return totalPrice;
            },
             goods(state){
                let goods=state.goods;
                 goods.forEach((v)=>{
                    v.totalPrice=v.num*v.price;
                 })
                 return goods;
             }
         }

    });
    let lists={
        template:'#lists',
        computed:{
            totalPrice(){
                return this.$store.getters.totalPrice;
            },
            goods(){
                return this.$store.getters.goods;
            }
        }
    };
        var app=new Vue({
           el:'#app',
            store,
            components:{
               lists
            }

        });


</script>
</html>